{% extends 'nav.html' %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="../../static/index-animation/css/style.css">
    <style>
        .imgs{
            width: 262px;
            height: 166px;
        }
    </style>
{% endblock %}

{% block container %}
<!--热门电影-->
{#<section id="hotmovie" style="margin-top:76px">#}
<section id="hotmovie">
    <div class="container">
        <!--轮播图 开始 -->
        <div class="main_banner">
            <div class="main_banner_wrap">
                <canvas id="myCanvas" width="150" height="150"></canvas>
                <div class="main_banner_box" id="m_box">
                    <a href="javascript:void(0)" class="banner_btn js_pre">
                        <span class="banner_btn_arrow"><i></i></span>
                    </a>
                    <a href="javascript:void(0)" class="banner_btn btn_next js_next">
                        <span class="banner_btn_arrow"><i></i></span>
                    </a>
                    <ul>
                        <li id="imgCard0">
                            <a href=""><span style="opacity:0;"></span></a>
                            <img src="../../static/index-animation/main_banner/big0020150102211033.jpg" alt="">
                            <p style="bottom:0">周杰伦粉丝版MV</p>
                        </li>
                        <li id="imgCard1">
                            <a href=""><span style="opacity:0.4;"></span></a>
                            <img src="../../static/index-animation/main_banner/big0120150101183428.jpg" alt="">
                            <p>乐侃有声节目第二期</p>
                        </li>
                        <li id="imgCard2">
                            <a href=""><span style="opacity:0.4;" ></span></a>
                            <img src="../../static/index-animation/main_banner/big0320150101183351.jpg" alt="">
                            <p>乐见大牌：”荣“耀之声，”维“我独尊</p>
                        </li>
                        <li id="imgCard3">
                            <a href=""><span style="opacity:0.4;"></span></a>
                            <img src="../../static/index-animation/main_banner/big0420150101224343.jpg" alt="">
                            <p>王力宏四年心血结晶</p>
                        </li>
                        <li id="imgCard4">
                            <a href=""><span style="opacity:0.4;"></span></a>
                            <img src="../../static/index-animation/main_banner/big0720150102210934.jpg" alt="">
                            <p>MV精选：《武媚》女神团美艳大比拼</p>
                        </li>
                    </ul>
                    <!--火狐倒影图层-->
                    <p id="rflt"></p>
                    <!--火狐倒影图层-->
                </div>
                <!--序列号按钮-->
                <div class="btn_list">
                    <span class="curr"></span><span></span><span></span><span></span><span></span>
                </div>
            </div>
        </div>
        <!--轮播图 结束 -->
    </div>
</section>
<!--热门电影-->
<!--电影列表-->
<section id="movielist">
    <div class="container">
        <div class="row wow fadeIn" data-wow-delay="0.6s">
            <div class="col-md-12 table-responsive">
                <table class="table text-left table-bordered" id="movietags">
                    <tr>
                        <td style="width:10%;">电影标签</td>
                        <td style="width:90%;">
                            <a class="label label-info"><span class="glyphicon glyphicon-tag"></span>&nbsp;标签一</a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag"></span>&nbsp;标签二</a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag"></span>&nbsp;标签三</a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag"></span>&nbsp;标签四</a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag"></span>&nbsp;标签五</a>
                    </tr>
                    <tr>
                        <td>电影星级</td>
                        <td>
                            <a class="label label-warning"><span class="glyphicon glyphicon-star"></span>&nbsp;一星</a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star"></span>&nbsp;二星</a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star"></span>&nbsp;三星</a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star"></span>&nbsp;四星</a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star"></span>&nbsp;五星</a>
                        </td>
                    </tr>
                    <tr>
                        <td>上映时间</td>
                        <td>
                            <a class="label label-default"><span class="glyphicon glyphicon-time"></span>&nbsp;最近</a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time"></span>&nbsp;2017</a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time"></span>&nbsp;2016</a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time"></span>&nbsp;2015</a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time"></span>&nbsp;更早</a>
                        </td>
                    </tr>
                    <tr>
                        <td>播放数量</td>
                        <td>
                            <a class="label label-success"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;从高到底</a>
                            &nbsp;
                            <a class="label label-danger"><span class="glyphicon glyphicon-arrow-up"></span>&nbsp;从低到高</a>
                        </td>
                    </tr>
                    <tr>
                        <td>评论数量</td>
                        <td>
                            <a class="label label-success"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;从高到底</a>
                            &nbsp;
                            <a class="label label-danger"><span class="glyphicon glyphicon-arrow-up"></span>&nbsp;从低到高</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/一出好戏.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">一出好戏</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/复仇者联盟3：无限战争.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">复仇者联盟3：无限战争</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/快把我哥带走.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">快把我哥带走</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/我不是药神.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">我不是药神</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/战狼2.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">战狼2</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/欧洲攻略.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">欧洲攻略</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/爱情公寓.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">爱情公寓</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/肖申克的救赎.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">肖申克的救赎</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/蚁人2：黄蜂女现身.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">蚁人2：黄蜂女现身</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/西红柿首富.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">西红柿首富</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/遗传厄运.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">遗传厄运</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="movielist text-center">
                    <!--<img data-original="holder.js/262x166"
                             class="img-responsive lazy center-block" alt="">-->
                    <img src="../../static/images/釜山行.jpg" class="img-responsive center-block imgs" alt="">
                    <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
                        <span style="color:#999;font-style: italic;">釜山行</span><br>
                        <div>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                            <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                        </div>
                    </div>
                    <a href="/play" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
                </div>
            </div>
            <div class="col-md-12">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="First">
                                <span aria-hidden="true">首页</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li><a href="#">1&nbsp;/&nbsp;10</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Last">
                                <span aria-hidden="true">尾页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>
<!--电影列表-->
{% endblock %}

{% block play %}

{% endblock %}
